<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>名师堂</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="flex-row flex-wrap teacher-list-box">
      <div class="flex-row flex-shrink item" :key="i" v-for="(item,i) of tableData">
        <div class="flex-shrink cover-box">
          <img :src="item.headImg" alt="" v-if="item.headImg&&item.headImg.length"/>
          <img src="../assets/img/cover.png" alt="" v-else/>
        </div>
        <div class="flex1 content">
          <el-link
              type="primary"
              href="javascript:;"
              class="font18"
              @click="toggleInfo(true, item)">
            {{ item.name }}
          </el-link>
          <div class="text-light line25 font14">
            <span>{{ TeacherLevels[item.positional] || TeacherLevels.common }} | </span>
            {{ item.sno }}
          </div>
          <div class="line25">{{ item.intro }}</div>
        </div>
      </div>
    </div>
    <div class="row-align-center footer">
      <div class="text-light font12" v-if="pageMeta.isEnd">---到底了---</div>
      <el-link class="" href="javascript:;" @click="nextPage" v-else>查看更多</el-link>
    </div>
  </el-card>

  <el-dialog
      v-model="info.show"
      width="600px">
    <el-form
        ref="formRefName"
        label-width="80px">
      <el-form-item label="姓名：">
        <div class="flex-row align-center">
          <img class="cover-image" :src="info.row.headImg" alt="" v-if="info.row.headImg&&info.row.headImg.length"/>
          {{ info.row.name }}
        </div>
      </el-form-item>
      <el-form-item label="工号：">
        {{ info.row.sno }}
      </el-form-item>
      <el-form-item label="手机号：">
        {{ info.row.phone }}
      </el-form-item>
      <el-form-item label="邮箱：">
        {{ info.row.email }}
      </el-form-item>
      <el-form-item label="性别：">
        <span v-if="info.row.sex==='male'">男士</span>
        <span v-else>女士</span>
      </el-form-item>
      <el-form-item label="职称：">
        {{ TeacherLevels[info.row.positional] || '' }}
      </el-form-item>
      <el-form-item label="简介：">
        {{ info.row.intro }}
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {defineComponent, reactive, ref, toRaw} from "vue"
import {usePageMeta} from "../hooks/usePageTableData";
import {deepClone} from "../utils/helpers";
import Toast from "../utils/Toast";
import Teacher from "../api/modules/Teacher";
import {TeacherLevels} from "../hooks/user/useUserLogin";

export default defineComponent({
  name: "Teachers",
  setup() {
    const pageHandle = usePageMeta();
    const params = reactive({
      filter: "",
    });
    const tableData = ref([]);
    const info = reactive({
      show: false,
      row: {}
    });
    onPageChange(1); // 初始化时直接请求一次分类列表
    async function onPageChange(page) {
      const pageMeta = deepClone(toRaw(pageHandle.pageMeta.value));
      if (page) {
        pageMeta.index = page;
      }
      try {
        const _params = {
          ...pageMeta,
          ...params,
        };
        const {data} = await Teacher.lists(_params);
        const _data = data.data || [];
        if (_params.index > 1) {
          tableData.value.push(..._data);
        } else { // 第一页
          tableData.value = _data;
        }

        pageHandle.updatePageMeta(_params.index, data.count);

      } catch (e) {
        console.log(e);
      }
    }

    // 查看更多
    function nextPage() {
      if (pageHandle.pageMeta.value.isEnd) {
        Toast.warning('到底了');
        return
      }
      onPageChange(pageHandle.pageMeta.value.index + 1)
    }

    // 打开关闭详情弹框
    function toggleInfo(show, row = {}) {
      info.show = show
      info.row = row
    }

    return {
      toggleInfo,
      info,
      TeacherLevels,
      ...pageHandle,
      nextPage,
      tableData,
    }
  },
})
</script>

<style lang="scss" scoped>
.teacher-list-box {
  width: 100%;
  padding: 30px 0;

  .item {
    width: 50%;
    padding: 20px;

    .cover-box {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: solid 1px #f9f9f9;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.cover-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: solid 1px #f9f9f9;
}

</style>
